<%--
  Created by IntelliJ IDEA.
  User: xixixili
  Date: 2020/4/15
  Time: 12:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>商品秒杀详情页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/productdetail.css">
    <script src="${pageContext.request.contextPath}/js/jQuery/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/bootstrap-3.3.7-dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">


</head>
<body>
<!--========================头部===================================================-->
<div class="top">
    <div class="top-log">
        <div class="logo">
            <a href=""><img src="${pageContext.request.contextPath}/images/xianyu.jpg" width="90" height="40"></a>
        </div>
    </div>
    <div class="top-dingwei">
        <div class="top-dingwei-main">
            <ul>
                <li class="top-dingwei-img">
                    <img src="${pageContext.request.contextPath}/images/dingwei.png">
                </li>
                <li class="top-dingwei-city">
                    <a href="#">深圳<p class="top-dingwei-jiantou"></p></a>
                </li>
            </ul>
        </div>
    </div>

    <!--============================搜索=====================================-->
    <div class="search-btn">
        <form onSubmit="submitFn(this, event);">
            <div class="search-wrapper">
                <div class="input-holder">
                    <input type="text" class="search-input" placeholder="请输入关键词" />
                    <button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>
                </div>
                <span class="close" onClick="searchToggle(this, event);"></span>
            </div>
        </form>
    </div>
    <!--=======================购物车==========================-->
    <div class="cart">
        <dl>
            <dt class="shopping-btn">
                <a href="">
                    <b class="totlePrice">￥2020.00</b>
                </a>
            </dt>
            <dd class="shopping-list" style="">
                <div class="spacer"></div>
                <div class="nogoods" style="display: none">
                    购物车中还没有商品，赶紧选购吧!
                </div>
                <div class="goods">
                    <ul>
                        <li>
                            <div class="l">
                                <a href="">
                                    <img src="${pageContext.request.contextPath}/images/cart1.jpg" width="42" height="42">
                                </a>
                            </div>
                            <div class="c">
                                <a href="">
                                    PAMPERO乌拉那拉去骨冷冻安格斯谷饲薄群肉牛排150g
                                </a>
                            </div>
                            <div class="r">
                                <b>￥39.90</b>
                                *3
                                <a href="" onclick="">删除</a>
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <a href="">
                                    <img src="${pageContext.request.contextPath}/images/cart1.jpg" width="42" height="42">
                                </a>
                            </div>
                            <div class="c">
                                <a href="">
                                    PAMPERO乌拉那拉去骨冷冻安格斯谷饲薄群肉牛排150g
                                </a>
                            </div>
                            <div class="r">
                                <b>￥39.90</b>
                                *3
                                <a href="" onclick="">删除</a>
                            </div>
                        </li>
                    </ul>
                    <div class="price-total">
                        <div>
                            <span class="totleNum">
                                共
                                <b>6</b>
                                件商品
                            </span>
                            <span class>
                                共计
                                <b class="totlePrice">￥120.00</b>
                            </span>
                        </div>
                    </div>
                </div>
            </dd>
        </dl>
    </div>

    <!--=======================我的====================================-->
    <div class="top-menu">
        <div class="login">
            <c:if test="${empty loginCustomer}">
                <p>
                    <a href="/fresh/customer/login.jsp">登录/</a>
                    <a href="/fresh/customer/regist.jsp">注册</a>
                </p>
            </c:if>

            <c:if test="${!empty loginCustomer}">
                <p>
                    <a href="">${loginCustomer.customerTelno}/</a>
                    <a href="/fresh/customer/outLogin">退出</a>
                </p>
            </c:if>
        </div>
        <div class="user">
            <ul>
                <li class=" tle">
                    <a class="geren" href=""><img src="${pageContext.request.contextPath}/images/geren-logo.png"></a>
                    <a href="">我的咸鱼</a>
                </li>
                <li class="e1">
                    <a class="order" href=""><img src="${pageContext.request.contextPath}/images/order-logo.png"></a>
                    <a href=" ">我的订单</a>
                </li>
                <li class="e2">
                    <a class="coupon" href=""><img src="${pageContext.request.contextPath}/images/coupon.png"></a>
                    <a href="">我的优惠券</a>
                </li>
                <li class="last">
                    <a class="exit" href=""><img src="${pageContext.request.contextPath}/images/exit.png"></a>
                    <a href="">退出账户</a>
                </li>
            </ul>
        </div>
    </div>
</div>




<!--==================================中间部分====================================-->

<div class="pro-detail">
    <div class="hidden" id="proId">
        ${product.productId}
    </div>
    <div class="hidden" id="seckillId">
        ${seckill.seckillId}
    </div>
    <div class="crumbs"></div>

    <div class="pic-preview">
        <div class="layui-carousel" id="test10">
            <div carousel-item="">
                <c:forEach var="images" items="${proImg.productImagesImage}">
                    <div><img src="${pageContext.request.contextPath}/images/${images}"></div>
                </c:forEach>
            </div>
        </div>
    </div>

    <div class="product-info">
        <div class="summary-name">
            <h1>${product.productName}</h1>
            <%--<h1>山东蓬莱红富士苹果9个约200g/个</h1>--%>
            <%--<p>皮薄肉脆 咔嚓一口好清脆</p>--%>
        </div>

        <div class="price-clearfix">
            <div class="pro-price">
                <span class="tt">秒杀价格：</span>
                <span>
                    <em>￥</em>
                    <span>${seckill.seckillPrice}</span>
                </span>
            </div>
            <div class="pro-m">
                <span class="ff">更多商品优惠，尽在咸鱼鲜生</span>

            </div>
        </div>
    </div>

    <div class="other-clearfix">
        <div class="left">
            <div class="choose-clearfix">
                <div class="ll">
                    <span>规格：</span>
                </div>
                <div class="dd">
                    <div class="top">
                        <span>￥</span>
                        <span>${seckill.seckillPrice}</span>
                    </div>
                    <div class="bot">
                        <span>${spec.specWeigth}</span>
                    </div>
                </div>
            </div>

            <div class="service">
                <img src="${pageContext.request.contextPath}/images/1.png">
                <span>不支持7天无理由退货</span>
            </div>

            <div class="amount">
                <div class="dt">
                    <span>数量：</span>
                </div>
                <div class="gt">
                    <div class="t count">
                        1
                    </div>
                    <div class="kt">
                        <div class="tp addcount">
                            +
                        </div>
                        <div class="btm reduce">
                            -
                        </div>
                    </div>
                </div>
                <div class="add-car">
                    <img src="${pageContext.request.contextPath}/images/addcar.png">
                    <a href="javascript:;" class="addToCart">加入购物车</a>
                </div>

            </div>

            <div class="right">
                <table width="100%" cellspacing="0" cellpadding="0" border="0" class="zx">
                    <tbody>
                    <tr>
                        <th>原产地：</th>
                        <td class="place">
                            ${spec.specPlace}
                        </td>
                    </tr>
                    <tr>
                        <th>商品编号：</th>
                        <td>${product.productNum}</td>
                    </tr>
                    <tr>
                        <th>规格：</th>
                        <td>${spec.specWeigth}</td>
                    </tr>
                    <tr>
                        <th>生产日期：</th>
                        <td class="time"></td>
                    </tr>
                    <tr>
                        <th>保质期：</th>
                        <td>${spec.specEndtime}天</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>








</div>
<div class="mainer">
    <%--小导航--%>
    <div class="detail-tab">
        <ul class="detail-ul">

            <li class="detail-li">
                <a href="#" class="comment-info-btn">用户评论</a>
                <span>${product.commentCount}</span>
            </li>
        </ul>
    </div>



    <%--评论框--%>
    <div class="detail-item">
        <div class="comment-info">
            <div class="score">
                <span>总体满意度</span>
                <b>
                    <span class="oo">${product.commentStars}</span>
                    <span>分</span>
                </b>
                <span>(共有<strong>${product.commentCount}</strong>人评论)</span>

            </div>

            <div class="comment-btn">
                <div class="comment">
                    <a href="">我要评论</a>
                    <p>只有买过商品的人才可以评论</p>
                </div>
            </div>

        </div>
        <div class="comment-list">
            <div class="comment-tab">
                <ul>
                    <li class="L-1">
                        <span>全部评论</span>
                        <span>${product.commentCount}</span>
                    </li>
                    <li>
                        <span>好评</span>
                        <span>0</span>
                    </li>
                    <li>
                        <span>中评</span>
                        <span>0</span>
                    </li>
                    <li>
                        <span>差评</span>
                        <span>0</span>
                    </li>

                </ul>

            </div>

            <%--评论内容--%>
            <div class="comment-con">
                <ul class="comment-ul">
                    <li>
                        <div class="content-comment">
                            <div class="heading">
                                <div class="stars-pg">
                                    <!--                                   <span style="width: 60%"></span>-->
                                </div>
                                <div class="pingfen">
                                    <span>3</span>
                                    <span>分</span>
                                </div>
                                <div class="zhiliang">
                                    <span>用户：</span>
                                    <span>用户名</span>
                                </div>

                                <div class="date">
                                    <span>评论时间</span>

                                </div>

                            </div>
                            <div class="reply">
                                <span>评论内容</span>

                            </div>
                        </div>
                    </li>


                </ul>


            </div>

        </div>
    </div>
</div>
<div class="footer">
    <div class="wrap">
        <div class="s1">
            <img src="${pageContext.request.contextPath}/images/quanqiu.png">
            <b>全球精选</b>
            <span>一站式生鲜购物方案</span>
        </div>
        <div class="s2">
            <img src="${pageContext.request.contextPath}/images/cangku.png">
            <b>多仓直发</b>
            <span>次日达配送服务</span>
        </div>
        <div class="s3">
            <img src="${pageContext.request.contextPath}/images/jingxuan.png">
            <b>品质严选</b>
            <span>精选正宗品质好食材</span>
        </div>
        <div class="s4">
            <img src="${pageContext.request.contextPath}/images/gouwu.png">
            <b>天天低价</b>
            <span>会员专属优惠购不停</span>
        </div>


    </div>

</div>
<div class="hidden" id="hidddd">
    ${spec.specPlace}
</div>
<div class="hidden" id="hiddd">
    ${seckill.seckillPrice}
</div>
<div class="hidden" id="pro">
    ${product.productId}
</div>
<div class="hidden" id="img">
    ${proImg.productImagesImage}
</div>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/head.js"></script>
<script src="${pageContext.request.contextPath}/js/productdetail.js"></script>
<script>
    // console.log($("#hidddd").text());
    // console.log($("#pro").text());
    // console.log($("#img").text());
    // console.log($("#hiddd").text());


    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            ,interval: 1800
            ,anim: 'fade'
            ,height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '400px'
            ,height: '400px'
            ,interval: 5000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
</body>
</html>
